<template>
  <div class="news-container">
    <h1>行业资讯</h1>
    <el-tabs v-model="activeTab">
      <el-tab-pane label="公司动态" name="company">
        <el-timeline>
          <el-timeline-item
            v-for="news in companyNews"
            :key="news.id"
            :timestamp="news.date"
            placement="top">
            <el-card>
              <h4>{{ news.title }}</h4>
              <p>{{ news.content }}</p>
              <el-image 
                v-if="news.image"
                :src="news.image"
                fit="cover"
                class="news-image"/>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </el-tab-pane>
      
      <el-tab-pane label="行业动态" name="industry">
        <el-timeline>
          <el-timeline-item
            v-for="news in industryNews"
            :key="news.id"
            :timestamp="news.date"
            placement="top">
            <el-card>
              <h4>{{ news.title }}</h4>
              <p>{{ news.content }}</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: 'News',
  data() {
    return {
      activeTab: 'company',
      companyNews: [
        {
          id: 1,
          title: '匠觉设计荣获2024餐饮空间设计大奖',
          content: '我们很荣幸地宣布，由匠觉设计团队打造的"江南忆"餐厅项目在2024年度餐饮空间设计评选中荣获金奖...',
          date: '2024-03-15',
          image: '/news/award.jpg'
        },
        {
          id: 2,
          title: '新项目完工：现代中式餐厅设计',
          content: '历时3个月的精心打造，位于苏州中心的"月秋"餐厅设计项目顺利完工...',
          date: '2024-02-28',
          image: '/news/project.jpg'
        }
      ],
      industryNews: [
        {
          id: 1,
          title: '2024餐饮空间设计趋势报告',
          content: '后疫情时代，餐饮空间设计呈现出新的发展趋势，更注重空间的灵活性和科技感...',
          date: '2024-03-10'
        },
        {
          id: 2,
          title: '可持续设计成为餐饮空间新趋势',
          content: '环保材料的使用和节能设计正在成为餐饮空间设计的新焦点...',
          date: '2024-02-20'
        }
      ]
    }
  }
}
</script>

<style scoped>
.news-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

h1 {
  margin-bottom: 30px;
  color: #333;
}

.el-card {
  margin-bottom: 20px;
}

h4 {
  margin: 0 0 15px 0;
  color: #333;
}

p {
  color: #666;
  line-height: 1.6;
}

.news-image {
  margin-top: 15px;
  width: 100%;
  max-height: 300px;
  border-radius: 4px;
}

:deep(.el-timeline-item__content) {
  width: 100%;
}
</style> 